<template>
  <div class="student-list">
    <el-button type="primary" icon="el-icon-plus" round @click="showAddDialog">添加学生</el-button>
    
    <el-table :data="students" style="width: 100%" header-cell-class-name="table-header">
      <el-table-column prop="studentId" label="学号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="department" label="院系" />
      <el-table-column prop="major" label="专业" />
      <el-table-column prop="grade" label="年级" />
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button size="small" icon="el-icon-edit" round @click="handleEdit(scope.row)">编辑</el-button>
          <el-dropdown @command="(command) => handleBiographyMenuSelect(command, scope.row)">
            <span class="el-dropdown-link">
              <el-button size="small" type="warning" icon="el-icon-document-add" round>添加生平</el-button>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="competition">添加竞赛</el-dropdown-item>
                <el-dropdown-item command="research">添加科研履历</el-dropdown-item>
                <el-dropdown-item command="internship">添加实习经历</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button size="small" type="danger" icon="el-icon-delete" round @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="currentStudent" label-width="80px">
        <el-form-item label="学号">
          <el-input v-model="currentStudent.studentId" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="currentStudent.name" />
        </el-form-item>
        <el-form-item label="院系">
          <el-input v-model="currentStudent.department" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="currentStudent.major" />
        </el-form-item>
        <el-form-item label="年级">
          <el-input v-model="currentStudent.grade" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 竞赛添加对话框 -->
    <el-dialog v-model="competitionDialogVisible" title="添加竞赛经历" width="500px">
      <el-form :model="competitionForm" label-width="80px">
        <el-form-item label="竞赛名称">
          <el-input v-model="competitionForm.name" placeholder="请输入竞赛名称" />
        </el-form-item>
        <el-form-item label="获奖等级">
          <el-select v-model="competitionForm.level" placeholder="请选择获奖等级">
            <el-option label="一等奖" value="first" />
            <el-option label="二等奖" value="second" />
            <el-option label="三等奖" value="third" />
            <el-option label="优胜奖" value="excellent" />
            <el-option label="参与奖" value="participation" />
          </el-select>
        </el-form-item>
        <el-form-item label="竞赛时间">
          <el-date-picker
            v-model="competitionForm.date"
            type="date"
            placeholder="选择竞赛日期"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="竞赛描述">
          <el-input
            v-model="competitionForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入竞赛描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="competitionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveCompetition">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 科研履历添加对话框 -->
    <el-dialog v-model="researchDialogVisible" title="添加科研履历" width="500px">
      <el-form :model="researchForm" label-width="80px">
        <el-form-item label="项目名称">
          <el-input v-model="researchForm.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="researchForm.role" placeholder="请输入担任角色" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="researchForm.startDate"
            type="date"
            placeholder="选择开始日期"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="researchForm.endDate"
            type="date"
            placeholder="选择结束日期"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input
            v-model="researchForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入项目描述"
          />
        </el-form-item>
        <el-form-item label="成果">
          <el-input
            v-model="researchForm.outcome"
            type="textarea"
            :rows="2"
            placeholder="请输入取得成果"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="researchDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveResearch">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 实习经历添加对话框 -->
    <el-dialog v-model="internshipDialogVisible" title="添加实习经历" width="500px">
      <el-form :model="internshipForm" label-width="80px">
        <el-form-item label="公司名称">
          <el-input v-model="internshipForm.company" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="internshipForm.position" placeholder="请输入实习职位" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="internshipForm.startDate"
            type="date"
            placeholder="选择开始日期"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="internshipForm.endDate"
            type="date"
            placeholder="选择结束日期"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="工作内容">
          <el-input
            v-model="internshipForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入主要工作内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="internshipDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveInternship">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { studentApi } from '../services/api';
import { ElMessage, ElMessageBox, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import 'element-plus/es/components/icon/style/css';
import 'element-plus/es/components/dropdown/style/css';
import 'element-plus/es/components/dropdown-menu/style/css';
import 'element-plus/es/components/dropdown-item/style/css';
import 'element-plus/es/components/select/style/css';
import 'element-plus/es/components/option/style/css';
import 'element-plus/es/components/date-picker/style/css';
import 'element-plus/es/components/input/style/css';
import 'element-plus/es/components/form/style/css';
import 'element-plus/es/components/form-item/style/css';

const students = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref('');
const currentStudent = ref({
  studentId: '',
  name: '',
  department: '',
  major: '',
  grade: ''
});

// 生平菜单相关
const selectedStudent = ref(null);

// 竞赛表单
const competitionDialogVisible = ref(false);
const competitionForm = ref({
  name: '',
  level: '',
  date: '',
  description: ''
});

// 科研履历表单
const researchDialogVisible = ref(false);
const researchForm = ref({
  name: '',
  role: '',
  startDate: '',
  endDate: '',
  description: '',
  outcome: ''
});

// 实习经历表单
const internshipDialogVisible = ref(false);
const internshipForm = ref({
  company: '',
  position: '',
  startDate: '',
  endDate: '',
  description: ''
});

const fetchStudents = async () => {
  try {
    // 使用模拟数据，因为后端服务不可用
    students.value = [
      {
        id: 1,
        studentId: '2021001',
        name: '张三',
        department: '计算机学院',
        major: '软件工程',
        grade: '2021级'
      },
      {
        id: 2,
        studentId: '2021002',
        name: '李四',
        department: '电子工程学院',
        major: '电子信息工程',
        grade: '2021级'
      },
      {
        id: 3,
        studentId: '2021003',
        name: '王五',
        department: '商学院',
        major: '工商管理',
        grade: '2021级'
      }
    ];
  } catch (error) {
    ElMessage.error('获取学生列表失败');
  }
};

const showAddDialog = () => {
  currentStudent.value = {
    studentId: '',
    name: '',
    department: '',
    major: '',
    grade: ''
  };
  dialogTitle.value = '添加学生';
  dialogVisible.value = true;
};

const handleEdit = (student) => {
  currentStudent.value = { ...student };
  dialogTitle.value = '编辑学生';
  dialogVisible.value = true;
};

const handleDelete = async (student) => {
  try {
    await ElMessageBox.confirm('确定要删除该学生吗？', '提示', {
      type: 'warning'
    });
    await studentApi.deleteStudent(student.id);
    ElMessage.success('删除成功');
    fetchStudents();
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败');
    }
  }
};

// 处理生平菜单选择
const handleBiographyMenuSelect = (command, student) => {
  selectedStudent.value = student;
  
  switch (command) {
    case 'competition':
      resetCompetitionForm();
      competitionDialogVisible.value = true;
      break;
    case 'research':
      resetResearchForm();
      researchDialogVisible.value = true;
      break;
    case 'internship':
      resetInternshipForm();
      internshipDialogVisible.value = true;
      break;
  }
};

// 重置竞赛表单
const resetCompetitionForm = () => {
  competitionForm.value = {
    name: '',
    level: '',
    date: '',
    description: ''
  };
};

// 重置科研履历表单
const resetResearchForm = () => {
  researchForm.value = {
    name: '',
    role: '',
    startDate: '',
    endDate: '',
    description: '',
    outcome: ''
  };
};

// 重置实习经历表单
const resetInternshipForm = () => {
  internshipForm.value = {
    company: '',
    position: '',
    startDate: '',
    endDate: '',
    description: ''
  };
};

// 保存竞赛记录
const saveCompetition = () => {
  // 模拟保存操作
  console.log('保存竞赛记录:', {
    studentId: selectedStudent.value.studentId,
    ...competitionForm.value
  });
  
  ElMessage.success('竞赛记录添加成功');
  competitionDialogVisible.value = false;
};

// 保存科研履历
const saveResearch = () => {
  // 模拟保存操作
  console.log('保存科研履历:', {
    studentId: selectedStudent.value.studentId,
    ...researchForm.value
  });
  
  ElMessage.success('科研履历添加成功');
  researchDialogVisible.value = false;
};

// 保存实习经历
const saveInternship = () => {
  // 模拟保存操作
  console.log('保存实习经历:', {
    studentId: selectedStudent.value.studentId,
    ...internshipForm.value
  });
  
  ElMessage.success('实习经历添加成功');
  internshipDialogVisible.value = false;
};

const handleSave = async () => {
  try {
    if (currentStudent.value.id) {
      await studentApi.updateStudent(currentStudent.value.id, currentStudent.value);
      ElMessage.success('更新成功');
    } else {
      await studentApi.createStudent(currentStudent.value);
      ElMessage.success('添加成功');
    }
    dialogVisible.value = false;
    fetchStudents();
  } catch (error) {
    ElMessage.error('保存失败');
  }
};

onMounted(() => {
  fetchStudents();
});
</script>

<style scoped>
.student-list {
  padding: 20px;
}
.table-header {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}
.el-button {
  margin-right: 8px;
}
</style>